<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
	<title>救援界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/site.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->
	<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
    <style type="text/css">
    html, body {
        height: 100%;
    }
    </style>
  </head>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.flot.js"></script>
  <script src="js/jquery.flot.resize.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&amp;type=webgl&amp;ak=K3ydaZ42YBTWDQGQ8UTCAitdIMBygzbf"></script>
  <body>
  <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container-fluid">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </a>
              <a class="brand" href="#">Admin</a>
              <div class="btn-group pull-right">
                  <a class="btn" href="my-profile"><i class="icon-user"></i> Admin</a>
                  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                      <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="my-profile">个人资料</a></li>
                      <li class="divider"></li>
                      <li><a href="#">退出</a></li>
                  </ul>
              </div>
              <div class="nav-collapse">
                  <ul class="nav">
                      <li><a href="index">首页</a></li>
                      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">用户 <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="new-user">新建用户</a></li>
                              <li class="divider"></li>
                              <li><a href="users">管理用户</a></li>
                          </ul>
                      </li>
                      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">角色 <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="new-role">新建角色</a></li>
                              <li class="divider"></li>
                              <li><a href="roles">管理角色</a></li>
                          </ul>
                      </li>
                      <li><a href="stats">救援</a></li>
                  </ul>
              </div>
          </div>
      </div>
  </div>

    <div class="container-fluid">
      <div class="row-fluid">
          <div class="span12">
		  <div class="row-fluid">
			<div class="page-header">
				<h1>救援界面<small id="InRoomInfo">Some statistics...</small></h1>
			</div>
			<div id="container" style=" width: 100%; height:700px"></div>
		  </div>
        </div>
      </div>
      <hr>

      <footer class="well">
        © Admin
      </footer>
    </div><script type="text/javascript">
        var point=new BMapGL.Point(114.40472706925753,30.529161754505846);
        // 创建点坐标

        var map = new BMapGL.Map("container");
        // 创建地图实例

        map.centerAndZoom(point, 40);
        map.disableNormalization
      // 初始化地图，设置中心点坐标和地图级别

        map.enableScrollWheelZoom(true);
        var marker=new BMapGL.Marker(point);
        // 创建叠加物显示的范围Bounds
        var pStart = new BMapGL.Point(114.40468159254102,30.529151945317118);
        var pEnd = new BMapGL.Point(114.40478096971454,30.529218291098374);
        var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat),
            new BMapGL.Point(pEnd.lng, pStart.lat));
        // 创建地面叠加层实例
        var imgOverlay = new BMapGL.GroundOverlay(bounds, {
            type: 'image',
            url: "/img/231map.png",
            opacity: 1
        });
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);
        // 叠加层添加到地图
        map.addOverlay(imgOverlay);
          //标签响应事件
          marker.addEventListener("click",function () {
              alert('当前经纬度:114.404926, 30.529189')
          })
          //地图响应事件
          map.addEventListener('click', function (e) {
              alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
          });
          var websocket=null;
          if('WebSocket' in window){
              websocket=new WebSocket('ws://localhost:8081/afterwebSocket');
          }
          else {
              alert('该浏览器不支持websocket');
          }
          websocket.onopen=function (event){
              console.log('建立连接');
          }
          websocket.onClose=function (event) {
              console.log('连接关闭')
          }
          websocket.onmessage=function (event){
              console.log('收到消息:'+event.data)
              var tem=JSON.parse(event.data);
              var len =map.getOverlays().length
              for (var i = len ;i>0; i--)
              {
                  if (map.getOverlays()[i] == "Marker")
                      map.removeOverlay(map.getOverlays()[i]);
              }
              Tag  = new BMapGL.Point(tem.x, tem.y);
              if(tem.inroom)
                  $('#InRoomInfo').text('室内坐标')
              else $('#InRoomInfo').text('室外坐标')
              map.addOverlay(new BMapGL.Marker(Tag));
              //map.addOverlay(imgOverlay);
          }
          websocket.onerror=function (){
              alert('通信发生错误')
          }
          window.onbeforeunload=function (){
              websocket.close();
      }
  </script>
  </body>
</html>
